<template>
  <view class="container" :class="mark == 1 ? 'bg-color-1' : 'bg-color-2'">
    <view class="header flex align-center">
      <view class="icon"></view>
      <view class="title">{{ dataObject.name }}</view>
    </view>
    <view class="content col-balck fw-600 dinAlternate">{{
      dataObject.value
    }}</view>
  </view>
</template>

<script>
export default {
  props: {
    dataObject: {
      type: Object,
      default: {},
    },
    mark: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.container {
  //   width: 210rpx;
  height: 124rpx;
  border-radius: 23rpx;
  padding-top: 22rpx;
  .header {
    margin-left: 24rpx;
    .icon {
      width: 7rpx;
      height: 18rpx;
      background: #664fe9;
    }
    .title {
      margin-left: 16rpx;
      font-weight: 600;
      font-size: 22rpx;
      color: #5d5d5d;
    }
  }
  .content {
    margin-top: 16rpx;
    text-align: center;
    font-size: 40rpx;
    color: #000000;
  }
}
.bg-color-1 {
  background: #fefefe;
}
.bg-color-2 {
  background: #f5f6f6;
}
</style>
